<template>
	<view class="centerEarnimgs">
		<view class="head">
			<view class="menu" :style="{marginTop: headTop}">
				<image @click="cli_goback" src="https://www.zzzsyh.com/applets/agent/agent/left_white.png" mode=""></image>
				<text>本月收益</text>
			</view>
			<view class="earnimgsNum">
				<view class="Box">
					<view class="top">
						总收益
					</view>
					<view class="second font_blod">
						<text class="txt1">¥</text>
						<text class="txt2">{{allMoney}}</text>
					</view>
				</view>
				<view class="Box">
					<view class="top">
						本月收益
					</view>
					<view class="second font_blod">
						<text class="txt1 txt3">¥</text>
						<text class="txt2 txt3">{{agentMoney}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="conTotle">
				<view class="box">
					<view class="" @click="cli_alladd">
						<text class="box-alladd">{{area}}</text>
						<image class="jtimage" src="https://www.zzzsyh.com/applets/agent/agent/right-four.png" mode=""></image>
					</view>
					<view class="boxadd" v-if="show_city">
						<view class="concen">
							<view class="concenList">
								<view class="li" @click="cli_pro(item, index)" :class="[liPro == index ? 'liOk' : '']" v-for="(item,index) in list_pro" :key="index">
									{{item.areaName}}
								</view>
							</view>
							<view class="concenList">
								<view class="li" @click="cli_city(item, index)" :class="[liCity == index ? 'liOk' : '']" v-for="(item,index) in list_city" :key="index">
									{{item.areaName}}
								</view>
							</view>
							<view class="concenList">
								<view class="li" @click="cli_con(item, index)" :class="[liCon == index ? 'liOk' : '']" v-for="(item,index) in list_con" :key="index">
									{{item.areaName}}
								</view>
							</view>
						</view>
						<view class="btnBox">
							<view class="chongzhi" @click="cli_chongzhi">
								<image class="czImg" src="https://www.zzzsyh.com/applets/agent/agent/chongzhi.png" mode=""></image>
								<text>重置</text>
							</view>
							<view class="btn" @click="cli_queding">
								确定
							</view>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="boxCen" @click="cli_time">
						<text>{{valueData}}</text>
						<image class="jtimage" src="https://www.zzzsyh.com/applets/agent/agent/right-four.png" mode=""></image>
					</view>

					<view class="boxhidden" :style="{display: show_t}">
						<view class="boxs" @click="cli_data (item, index)" :class="[indexData == index? 'boxsOk' : '']"
							v-for="(item,index) in listData" :key="index">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="list" v-if="list.length > 0">
				<view class="li" v-for="(item, index) of list" :key="index">
					<view class="top">
						<text>收益</text>
						<text>+{{item.agentCommission}}</text>
					</view>
					<view class="second">
						<text>{{item.areaName}}</text>
						<text>{{item.createTime}}</text>
					</view>
				</view>
			</view>
			<view class="list" v-else>
				<view class="yPopNone">
					<image class="yPopNoneImg" src="https://www.zzzsyh.com/applets/agent/factory/23.png" mode="">
					</image>
					<view class="yPopNoneTxt">
						暂无收益~
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../../api/index.js'
	export default {
		data() {
			return {
				agentId: uni.getStorageSync('agentId'),
				headTop: '',
				listData: ['今日', '近一个月', '近三个月', '近六个月'],
				indexData: 0,
				valueData: '今日',
				allMoney: '0',
				agentMoney: '0',
				list: [],
				show_t: 'none',
				show_city: false,
				pro: '',
				city: '',
				con: '',
				con_id: '',
				area: '全部地区',
				liPro: '-1',
				liCity: '-1',
				liCon: '-1',
				list_pro: [],
				list_city: [],
				list_con: []
			}
		},
		mounted() {
			this.getHeight()
			this.getServiceSettleDetails()
		},
		methods: {
			// 点击返回
			cli_goback () {
				console.log(1);
				uni.switchTab({
					url: '/pages/center/center'
				})
			},
			
			// 点击打开时间选择
			cli_time() {
				if (this.show_t == 'none') {
					this.show_t = 'show'
				}else {
					this.show_t = 'none'
				}
			},
			// 点击选择时间
			cli_data(item, index) {
				console.log(item, index);
				this.indexData = index
				this.valueData = item
				this.show_t = 'none'
				this.getServiceSettleDetails()
			},
			cli_1() {
				this.show_t = 'none'
			},
			// 点击全部地区
			cli_alladd() {
				this.show_city = !this.show_city
				this.liPro = '-1'
				this.liCity = '-1'
				this.liCon = '-1'
				this.list_city = []
				this.list_con = []
				this.getAreaByAgentId(0,'1')
				
			},
			
			// 点击重置
			cli_chongzhi () {
				this.liPro = '-1'
				this.liCity = '-1'
				this.liCon = '-1'
				this.pro = ''
				this.city = ''
				this.con = ''
				this.con_id = ''
				this.area = '全部地区'
			},
			// 点击省
			cli_pro (item, index) {
				this.liPro = index
				this.list_con = []
				this.liCity = '-1'
				this.getAreaByAgentId(item.id, '2')
			},
			// 点击市
			cli_city (item, index) {
				this.liCity = index
				this.liCon = '-1'
				this.getAreaByAgentId(item.id, '3')
			},
			// 点击区县
			cli_con (item, index) {
				this.liCon = index
				this.con = item.areaName
				this.con_id = item.id
			},
			// 点击确定
			cli_queding () {
				if(this.con) {
					this.area = ''
					this.area = this.pro + ' ' + this.city + ' ' + this.con
					this.getServiceSettleDetails()
				}else {
					this.area = '全部地区'
				}
				this.show_city = false
			},
			// 获取省市县 会长管辖区域的
			getAreaByAgentId (pid, type) {
				let _that = this
				uni.request({
					url: allapi.getAreaByAgentId,
					data: {
						pid: pid,
						agentId: this.agentId,
						type: type
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						if (type == '1') {
							_that.list_pro = dat
						}else if (type == '2') {
							_that.list_city = dat
						}else if (type == '3') {
							_that.list_con = dat
						}
					},fail: (err) => {
						console.log(err);
					}
				})
			},
			// 会长个人中心 本月收益详情
			getServiceSettleDetails () {
				let valueData = this.valueData
				let type = ''
				if (valueData == '今日') {
					type = '1'
				}else if (valueData == '近一个月') {
					type = '2'
				}else if (valueData == '近三个月') {
					type = '3'
				}else if (valueData == '近六个月') {
					type = '4'
				}
				uni.request({
					url: allapi.getServiceSettleDetails,
					data: {
						agentId: this.agentId,
						areaId: this.con_id,
						type: type
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						this.agentMoney = dat.agentMoney
						this.allMoney = dat.allMoney
						this.list = dat.commissionList
					},fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取、胶囊信息
			getHeight() {
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let headHeight = menuButtonInfo.bottom + 12 + 'px'
				let headTop = menuButtonInfo.top + 'px'
				this.headTop = headTop
				console.log(headHeight, headTop);
			}
		}
	}
</script>

<style scoped lang="scss">
	.centerEarnimgs {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		left: 0;
		top: 0;
		flex-direction: column;
		background: url('https://www.zzzsyh.com/applets/agent/agent/15.png');
		background-size: 100%;
		background-repeat: no-repeat;

		.head {
			.menu {
				display: flex;
				align-items: center;

				image {
					width: 38rpx;
					height: 48rpx;
					margin-left: 30rpx;
				}

				text {
					color: #FFFFFF;
					font-size: 36rpx;
					margin-left: 35rpx;
					font-weight: 600;
				}
			}

			.earnimgsNum {
				margin: 24rpx;
				margin-top: 50rpx;
				// height: 194rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 34rpx 56rpx;
				display: flex;
				justify-content: space-between;

				.Box {
					.top {
						line-height: 40rpx;
						font-size: 28rpx;
						color: #666666;
					}

					.second {
						.txt1 {
							line-height: 44rpx;
							color: #333333;
							font-size: 32rpx;
						}

						.txt2 {
							line-height: 84rpx;
							color: #333333;
							font-size: 60rpx;
							margin-left: 8rpx;
						}

						.txt3 {
							color: #28CD50;
						}
					}
				}
			}
		}

		.content {
			flex: 1;
			overflow: auto;
			margin: 24rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0px 0px;
			padding: 24rpx;
			display: flex;
			flex-direction: column;

			.conTotle {
				height: 54rpx;
				display: flex;
				align-items: center;

				.box {
					border: 2rpx solid #28CD50;
					border-radius: 8rpx;
					padding: 10rpx 24rpx;
					line-height: 34rpx;
					color: #28CD50;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 24rpx;
					position: relative;

					.boxadd {
						width: 700rpx;
						background: #FFFFFF;
						position: absolute;
						left: -26rpx;
						top: 60rpx;
						// height: 100rpx;
						padding: 20rpx 0;

						.concen {
							background: #F0F0F0;
							height: 600rpx;
							display: flex;
							.concenList {
								width: 33.3%;
								overflow: auto;
								
								.li {
									height: 72rpx;
									line-height: 72rpx;
									text-align: center;
									color: #666666;
									font-size: 24rpx;
								}
								.liOk {
									background: #FFFFFF;
									color: #28CD50;
									font-weight: bold;
								}
							} 
						}

						.btnBox {
							display: flex;
							padding: 20rpx 24rpx;
							.chongzhi {
								font-size: 24rpx;
								color: #333333;
								line-height: 34rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								.czImg {
									width: 30rpx;
									height: 30rpx;
								}
							}
							.btn {
								flex: 1;
								height: 92rpx;
								line-height: 92rpx;
								background: #28CD50;
								border-radius: 48rpx;
								margin-left: 28rpx;
								color: #FFFFFF;
								text-align: center;
								font-size: 32rpx;
							}
						}
					}

					.boxCen {
						display: flex;
						align-items: center;
					}

					.box-alladd {
						width: 96rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.boxhidden {
						position: absolute;
						width: 140rpx;
						// height: 300rpx;
						background: #F0F0F0;
						top: 58rpx;
						left: 0;
						border: 1rpx solid #EEEEEE;

						.boxs {
							height: 60rpx;
							// background: red;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
						}

						.boxsOk {
							background: #FFFFFF;
						}
					}

					.jtimage {
						width: 30rpx;
						height: 30rpx;
						transform: rotate(90deg);
						margin-left: 16rpx;
					}
				}
			}

			.list {
				flex: 1;
				height: 100%;
				overflow: auto;
				margin-top: 24rpx;

				.li {
					height: 120rpx;
					border-bottom: 1rpx solid #EEEEEE;
					padding-top: 0.1rpx;

					.top {
						display: flex;
						justify-content: space-between;
						line-height: 40rpx;
						color: #333333;
						font-size: 28rpx;
						margin-top: 18rpx;
					}

					.second {
						display: flex;
						justify-content: space-between;
						line-height: 34rpx;
						color: #999999;
						font-size: 24rpx;
						margin-top: 8rpx;
					}
				}
			}
		}
	}
</style>
